<template>
    <view class="box">
        <view class="flex_wrap column_between">
            <u-gap height="14rpx" bgColor="#F5F5F5" />
            <view class="meetingHead column_between">
                <view class="meetingTitle flex_wrap row_middle row_between">
                    <view class="flex_wrap">
                        <u-icon
                            name="/static/img/conference/detailicon.png"
                            space="14rpx"
                            width="48rpx"
                            height="48rpx"
                            labelSize="40rpx"
                            labelColor="#333"
                            bold
                        /><view class="boxwrap">{{ meetDetail.theme }}</view>
                    </view>
                </view>
                <view class="meetingTime flex_wrap row_between row_middle">
                    <view class="flex_wrap column_between">
                        <u--text
                            bold
                            :text="$u.timeFormat(meetDetail.startTime, 'hh:MM')"
                            size="48rpx"
                            color="#333"
                            lineHeight="80rpx"
                        />
                        <u--text
                            color="#333"
                            size="32rpx"
                            :text="
                                $u.timeFormat(
                                    meetDetail.startTime,
                                    'yyyy/mm/dd'
                                )
                            "
                        />
                    </view>
                    <u-image
                        src="/static/img/conference/iconline.png"
                        width="168rpx"
                        height="20rpx"
                        mode="widthFix"
                    />
                    <view class="flex_wrap column_between">
                        <u--text
                            bold
                            :text="$u.timeFormat(meetDetail.endTime, 'hh:MM')"
                            size="48rpx"
                            color="#333"
                            align="right"
                            lineHeight="80rpx"
                        />
                        <u--text
                            color="#333"
                            size="32rpx"
                            :text="
                                $u.timeFormat(meetDetail.endTime, 'yyyy/mm/dd')
                            "
                        />
                    </view>
                </view>
            </view>
            <u-gap height="14rpx" bgColor="#F5F5F5" />
            <view class="meetingMessage flex_wrap flex_column">
                <u-gap height="20rpx"></u-gap>
				<view>
					<u-image
						width="690rpx"
					    height="394rpx"
					    :src="meetDetail.picture"
					    mode="aspectFill"
					    radius="12rpx"
					/>
					<u-gap height="28rpx" />
				</view>
                <!-- <u-row>
                    <u-col span="3"
                        ><u--text text="主办/负责人" color="#666" size="28rpx"
                    /></u-col>
                    <u-col span="8"
                        ><u--text
                            :text="`${meetDetail.organizer} (${meetDetail.organizerPerson})  `"
                            color="#333"
                            size="28rpx"
                    /></u-col>
                </u-row>
                <u-gap height="20rpx" /> -->
                <u-row>
                    <u-col span="3"
                        ><u--text text="讲师" color="#666" size="28rpx"
                    /></u-col>
                    <u-col span="8"
                        ><u--text
                            :text="`${meetDetail.lecturer}`"
                            color="#333"
                            size="28rpx"
                    /></u-col>
                </u-row>
                <u-gap height="20rpx" />
               <!-- <u-row>
                    <u-col span="3"
                        ><u--text text="业务归属" color="#666" size="28rpx"
                    /></u-col>
                    <u-col span="8"
                        ><u--text
                            :text="`${meetDetail.businessAffiliation}`"
                            color="#333"
                            size="28rpx"
                    /></u-col>
                </u-row>
                <u-gap height="20rpx"></u-gap> -->
                <!-- <u-row>
                    <u-col span="3"
                        ><u--text text="主办" color="#666" size="28rpx"
                    /></u-col>
                    <u-col span="8"
                        ><u--text
                            :text="meetDetail.submitManName"
                            color="#333"
                            size="28rpx"
                    /></u-col>
                </u-row> -->
                <u-gap height="20rpx" />
                <u-row justify="space-between" align="top" @click="openMap">
                    <u-col span="3"
                        ><u--text text="会议地址" color="#666" size="28rpx"
                    /></u-col>
                    <u-col span="7">
                        <u--text
                            :text="`${meetDetail.addressName || ''}${
                                meetDetail.address
                            }`"
                            color="#333"
                            size="28rpx"
                    /></u-col>
                    <u-col span="2">
                        <u--text
                            prefixIcon="/static/img/conference/mapIcon.png"
                            iconStyle="width:32rpx;height:32rpx"
                            text="导航"
                            space="4rpx"
                            size="28rpx"
                            color="#999"
                            align="right"
                        />
                    </u-col>
                </u-row>
                <u-gap height="20rpx" />
            </view>
        </view>
        <u-gap height="14rpx" bgColor="#F5F5F5" />
        <!-- 会议必须是在进行中 && 已经报名 && 不是本人的会议（下级才能扫描二维码签到） -->
        <!-- v-if="!haveSignedUp" -->
        <block>
            <u-button
                text="报名"
                color="#588BF3"
                :hairline="false"
                shape="circle"
                :customStyle="buttonCustomStyle"
                @click="signIn"
            />
            <!-- <u-button
                text="取消报名"
                :loading="signLoading"
                type="default"
                plain
                :hairline="false"
                @click="signUpHandler"
                shape="circle"
                :customStyle="{
                    ...buttonCustomStyle,
                    border: '1px solid #666',
                }"
                v-else
            /> -->
        </block>

        <!-- 转发弹框 -->
        <u-popup
            :show="showShare"
            mode="bottom"
            :overlayOpacity="overlayOpacity"
            @close="showShare = false"
            @open="
                overlayOpacity = '0.5';
                showShare = true;
            "
            :closeable="true"
            @touchmove.stop.prevent="() => {}"
        >
            <view
                style="
                    height: 324rpx;
                    text-align: center;
                    font-size: 28rpx;
                    margin-top: 12rpx;
                "
                @touchmove.stop.prevent="() => {}"
            >
                <text>分享给</text>
                <view
                    style="
                        margin-top: 40rpx;
                        display: flex;
                        justify-content: center;
                    "
                >
                    <button open-type="share" style="background-color: #fff">
                        <image
                            src="/static/img/conference/weixin.png"
                            mode=""
                            style="width: 80rpx; height: 80rpx"
                        ></image>
                        <view style="margin-top: 10rpx; font-size: 28rpx"
                            >微信好友</view
                        >
                    </button>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import { salesmanInfo } from "@/api/userSalesman.js";

import {
    getSignUpIdByMeetId,
    signUp,
    cancelSignUp,
    getMeetDetailByMeetId,
    revokeMeet,
} from "@/api/salesmanMeeting.js";
import { getMiniCodeByAppId } from "@/api/orderSalesman.js";
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            overlayOpacity: "0.5",
            showShare: false,
            IconStyle: {
                width: "36rpx",
                height: "36rpx",
                marginRight: "14rpx",
            },
            signLoading: false,
            codeSize: uni.upx2px(270),
            buttonCustomStyle: {
                width: "90vw",
                marginTop: "100rpx",
                outline: "none",
                border: "none",
            },
            getSignUpIdLoading: false,
            meetId: "", // 会议id
            haveSignedUp: false, // 是否报名
            meetDetail: {},
            signUpId: null, //签到Id
            baseSrc: "",
        };
    },

    computed: {
        ...mapGetters(["userInfo", "isLogin"]),
    },
    beforeDestroy() {
        if (this.isLogin) {
            uni.removeStorageSync("loginBackUrl");
            uni.removeStorageSync("loginBackUrlOption");
        }
    },
    onLoad(options) {
        this.meetId = options.meetId;
        this.haveSignedUp = options.haveSignedUp === "true" ? true : false;

        var pages = getCurrentPages(); // 获取栈实例
        if (pages.length === 1) {
            let currentRoute = pages[pages.length - 1].route; // 获取当前页面路由
            let currentPage = pages[pages.length - 1]["$page"]["fullPath"]; //当前页面路径(带参数)
            uni.setStorageSync("loginBackUrl", currentPage);
        }
        if (!this.isLogin)
            return uni.navigateTo({ url: "/pages/user/phone/indexApp" });
        // TODO 这段代码解决 业务员分享会议 客户角色进入 重定向到客户的商品详情页面（业务和客户商城不一致，分为两套，）customer 客户端 salesman业务员
        if (this.$store.getters?.authority === "customer") {
            let pages = getCurrentPages();
            let currentPage = pages[pages.length - 1];
            uni.$u.route({
                type: "redirectTo",
                url: "/pages_signin/userCheckin/index",
                params: currentPage.options,
            });
            return;
        }
        this.getMeetDetail(this.meetId); //获取会议详情
    },

    methods: {
        //用户信息
        async getInfo() {
            const res = await salesmanInfo();
            if (res.code === 200) {
                this.dimission = res.data.dimission;
            }
        },
        getMeetDetail(meetId) {
            getMeetDetailByMeetId(meetId).then((res) => {
                this.meetDetail = res.data;
            });
        },
        // 获取签到Id
        signIn() {
            this.getInfo().then(() => {
                if (this.dimission !== "0") {
                    uni.showToast({
                        icon: "none",
                        title: "已离职,不可报名",
                    });
                    return;
                } else {
                    const that = this;
                    that.signLoading = true;
                    signUp(that.meetId)
                        .then((res) => {
                            console.log(res, "res>>");
                            uni.$u.toast("报名成功!", 3000);
                            uni.$u.route({
                                type: "redirectTo",
                                url: "/pages_myMeeting/meeting/index",
                            });
                            // uni.$u.sleep(200).then(() => {
                            //     that.getSignUpId(that.meetId)
                            //         .then(async () => {
                            //             that.haveSignedUp = true;
                            //             hat.signLoading = false;
                            //             uni.$u.toast("已生成签到二维码!");
                            //         })
                            //         .catch((error) => {
                            //             that.signLoading = false;
                            //         });
                            // });
                        })
                        .catch((error) => {
                            console.log(error, "res>>");
                            that.signLoading = false;
                            if (error == "您已报名该会议！请勿重复报名！") {
                                uni.$u.route({
                                    type: "redirectTo",
                                    url: "/pages_myMeeting/meeting/index",
                                });
                            }
                        });
                }
            });
        },
        openMap() {
            // wx.navigateToMiniProgram({
            //         appId: 'wx33fd6cdc62520063', // 要跳转的微信小程序appid
            //         path: 'pages/sub-preMeeting/join-meeting/join-meeting?scene=m%3D'+177553566, // 要跳转到的页面路径
            //         success() {},
            //         fail() {}
            // });

            const that = this;
            uni.openLocation({
                longitude: Number(that.meetDetail.coordinatesX), //经度
                latitude: Number(that.meetDetail.coordinatesY), //纬度
                // name: that.meetDetail.address, // 目的地定位名称
                name: that.meetDetail.addressName, // 目的地定位名称
                scale: 15, //缩放比例
                // address: `${this.meetDetail.province}${this.meetDetail.city}${this.meetDetail.county}${this.meetDetail.address}` //导航详细地址
                address: that.meetDetail.address, //导航详细地址
            });
        },
    },
};
</script>
<style>
page {
    background-color: #fff !important;
}
</style>

<style lang="scss" scoped>
.meetingHead {
    width: 100vw;
    height: auto;
    padding: 0 28upx;
    background-color: #fff;
    .meetingTitle {
        width: 100%;
        height: 96rpx;
        border-bottom: 1px solid #f3f3f3;
    }
    .meetingTime {
        padding: 20upx 16upx;
    }
}
.meetingMessage {
    background-color: #fff;
    padding: 10upx 28upx;
}
.code {
    overflow: hidden;
    width: 100vw;
    height: auto;
    margin: 0 auto;
    padding-top: 40upx;
    .codeBox {
        // width: 270upx;
        // height: 270upx;
        margin: 0 auto;
        margin-bottom: 40upx;
    }
}
.box {
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}
.meetingListWrap {
    padding: 0 30rpx;
}
.shareWrap {
    background: #588bf3;
    border-radius: 4000rpx 4000rpx 4000rpx 4000rpx;
    padding: 8rpx 16rpx;
}
.boxwrap {
    display: block;
    width: 500rpx;
    overflow: hidden;
    font-size: 40rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
}
</style>
